/** 活动基础信息 */
<script setup>
import ContentBox from '@/components/ContentBox.vue'

const props = defineProps({
  name: {
    type: String,
    default: '',
  },
  phone: {
    type: String,
    default: '',
  },
  descList: {
    type: Array,
    default: () => [],
  },
  labelWidth: {
    type: String,
    default: '200rpx',
  },
})

const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: props.phone,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none',
      })
    },
  })
}
</script>

<template>
  <ContentBox>
    <view class="info-title">{{ name }}</view>
    <view class="info-content">
      <view
        v-for="item in descList"
        :key="item.label"
        class="info-content-item"
      >
        <view
          class="info-content-item-label"
          :style="{ width: labelWidth }"
        >
          {{ item.label }}
        </view>
        <view class="info-content-item-value">{{ item.value }}</view>
        <view
          v-if="phone && item?.showCallBtn"
          class="contact-btn"
          @click="callPhone"
        >
          <wd-icon
            name="call"
            size="28rpx"
          ></wd-icon>
          <text>立即拨号</text>
        </view>
      </view>
    </view>
  </ContentBox>
</template>

<style lang="scss" scoped>
.info-title {
  margin-bottom: 32rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: $uni-text-color;
}

.info-content {
  &-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-label {
      flex-shrink: 0;
      width: 160rpx;
      font-size: 28rpx;
      color: $uni-text-color-grey;
    }

    &-value {
      flex: 1;
      font-size: 28rpx;
      color: $uni-text-color;
    }

    .contact-btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6rpx 16rpx;
      font-size: 24rpx;
      color: #f98f18;
      border: 1rpx solid #f98f18;
      border-radius: 20rpx;
    }
  }
}
</style>
